<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: LiYansheng
 * @Date: 2022-04-02 15:11:25
 * @LastEditors: CoderXZ
 * @LastEditTime: 2022-04-08 22:59:36
-->
<template>
  <div>
    <div class="container">
      <el-row>
        <!-- 此处先判断用户角色，然后决定是否显示该按钮! -->
        <el-col :span="3">
          <el-input v-model="query.company" placeholder="公司名"></el-input>
        </el-col>
        <el-col :span="3">
          <el-input v-model="query.job" placeholder="岗位" class="my"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" class="my" @click="getData">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
        <el-col :span="3" :offset="10">
          <el-button type="success" @click="dialogVisible = true" :disabled="roleId == 1"
            >我要发布招聘信息</el-button
          >
        </el-col>
      </el-row>
      <el-card v-for="job in jobs" :key="job.id">
        <el-row>
          <el-col :span="12">
            <el-tag type="success">公司</el-tag>{{ job.company }}
          </el-col>
          <el-col :span="12"> <el-tag type="info">招聘岗位</el-tag>{{ job.job }} </el-col>
          <el-col :span="12"> <el-tag type="info">地址</el-tag>{{ job.address }} </el-col>
          <el-col :span="12">
            <el-tag type="success">薪资</el-tag>{{ job.salary }}
          </el-col>
          <el-col :span="12">
            <el-tag type="primary">招聘要求</el-tag>{{ job.claim }}
          </el-col>
          <el-col :span="12">
            <el-tag type="success">公司官网</el-tag><el-link>{{ job.website }}</el-link>
          </el-col>
          <el-col :span="12">
            <el-tag type="info">投递邮箱</el-tag>{{ job.email }}
          </el-col>
          <el-col :span="12">
            <el-tag type="danger">备注</el-tag>{{ job.remark }}
          </el-col>
        </el-row>
      </el-card>
      <el-dialog title="添加招聘信息" :visible.sync="dialogVisible" width="30%">
        <el-form
          :model="form"
          :rules="rules"
          label-width="80px"
          label-position="left"
          ref="form"
        >
          <el-form-item label="公司名称" prop="company">
            <el-input v-model="form.company" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="岗位" prop="job">
            <el-input v-model="form.job" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="薪资" prop="salary">
            <el-input v-model="form.salary" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="工作地址" prop="address">
            <el-input v-model="form.address" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="公司官网">
            <el-input v-model="form.website" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="投递邮箱" prop="email">
            <el-input v-model="form.email" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="岗位要求" prop="claim">
            <el-input
              v-model="form.claim"
              placeholder=""
              type="textarea"
              style="margin-left: 9px"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="form.remark"
              placeholder=""
              type="textarea"
              style="margin-left: 9px"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveAdd('form')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Area from "@/components/my/Area";
import { find, add } from "../../api/job.js";
export default {
  components: {
    Area,
  },
  created() {
    this.getData();
  },
  data() {
    return {
      rules: {
        company: [{ required: true, message: "请输入", trigger: "blur" }],
        job: [{ required: true, message: "请输入", trigger: "blur" }],
        salary: [{ required: true, message: "请输入", trigger: "blur" }],
        email: { required: true, message: "请输入", trigger: "blur" },
        claim: { required: true, message: "请输入", trigger: "blur" },
        address: { required: true, message: "请输入", trigger: "blur" },
      },
      roleId: localStorage.getItem("roleId"),
      query: {
        company: null,
        job: null,
      },
      jobs: [],
      dialogVisible: false,
      form: {},
    };
  },
  methods: {
    saveAdd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 获取当前登录的用户
          this.form.publisher = null;
          // 后续配置
          add(this.form)
            .then((result) => {
              if (result.status == "200") {
                this.$message.success("提交成功，等待审核！");
              }
            })
            .catch((err) => {});
        } else {
          return false;
        }
      });
    },
    reset() {
      this.query.company = null;
      this.query.job = null;
      this.getData();
    },
    getData() {
      find(this.query)
        .then((result) => {
          if (result.status == "200") {
            this.jobs = result.data;
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style>
.el-card {
  width: 100%;

  margin-top: 15px;
}
.el-tag {
  font-size: 15px;
}

.el-input {
  margin-left: 10px;
  margin-right: 10px;
}
.my {
  margin-left: 15px;
  margin-right: 15px;
}
</style>
